<template>
	<view class="_sendcode fbox H x-between">
		<input class="input grow mr-md"
			v-model="inValue"
			:placeholder="defPlaceholder"
			:placeholder-class="placeholderClass||''"
			:maxlength="11"
			:disabled="disabled"
			:focus="focus"
			@input="onInput"
			@blur="onBlur"></input>
		<view class="_send noshrink color-primary" :class="{'disabled':disabled}" @click="getCode" v-if="!lock.value">{{textSetting.sendCode}}</view>
		<view class="_countDown" v-else>{{lock.showStr}}</view>
	</view>
</template>

<script>
	export default {
		name:"moduleSendcode",
		model:{
			prop:"value",
			event:"input"
		},
		props:{
			value:{
				type:[String,Number,null],
				default:""
			},
			placeholder:{
				type:[String,null],
				default:null
			},
			placeholderClass:{
				type:[String,null],
				default:""
			},
			disabled:{
				type:[Boolean,null],
				default:false
			},
			focus:{
				type:[Boolean,null],
				default:false
			},
			//请求数据，必须
			httpData:{
				type:[Object,null],
				default:()=>({})
			},
			keys:{
				type:[Object,null],
				default:()=>({})
			},
			text:{
				type:[Object,null],
				default:()=>({})
			},
		},
		data() {
			return {
				inValue:"",
				lock:{
					timeOut:60,//等待时间
					timer:"",
					showStr:"",
					value:false
				},
				//http请求锁
				questLock:{
					value:false
				},
				dicKeys:{
					http: "nquest",
					phone: "phone",
				},
				dicText:{
					sendCode: "发送验证码",
					plcInputPhone: "请输入手机号",
					tipPhoneError: "请输入正确的手机号码",
					tipCodeSent: "验证码已发送",
				}
			}
		},
		computed:{
			keySetting(){
				if(this.$api.isObject(this.keys)){
					return Object.assign({},this.dicKeys,this.keys)
				}
				return this.dicKeys
			},
			textSetting(){
				if(this.$api.isObject(this.text)){
					return Object.assign({},this.dicText,this.text)
				}
				return this.dicText
			},
			defPlaceholder(){
				return this.$api.isDefined(this.placeholder)? this.placeholder :this.textSetting.plcInputPhone
			},
		},
		methods: {
			onInput(e){
				this.$emit("input",this.inValue)
			},
			onBlur(e){
				this.$emit("blur",this.inValue)
			},
			getCode(){
				if(this.disabled){
					return
				}
				if(!this.$api.regCheck(this.inValue, "mobile")){
					this.$api.msg(this.textSetting.tipPhoneError, "error");
					return
				}
				let httpData = Object.assign({}, this.httpData);
				if(!httpData.port&&!httpData.url){
					return
				}
				if(!httpData.data){
					httpData["data"] ={}
				}
				httpData.data[this.keySetting.phone] = this.inValue;
				
				this.$http[this.keySetting.http](httpData, this.questLock).then((res)=>{
					this.lock["value"] = true;
					this.lock.showStr = this.lock.timeOut;
					this.lock.timer = setInterval(()=>{
						this.lock.showStr -=1;
						if(this.lock.showStr <= 0){
							this.lock.value = false;
							clearInterval(this.lock.timer)
						}
					},1000)
					if(!this.useLoginQuest&&res.code!="10000"){
						if(res.message){
							this.$api.msg(res.message, "error")
						}
					}else{
						this.$api.msg(this.textSetting.tipCodeSent, "success");
					}
				})
			},
		},
		watch:{
			"value":{
				immediate:true,
				handler(newVal){
					this.inValue = newVal||""
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
._sendcode{
	.input{
		font-size: inherit;
	}
	._send{
		font-size: 87.5%;
		&.disabled{
			color: $vi-txtColor-disable;
		}
	}
	._countDown{
		margin-right: 1.5em;
		color: red;
		font-size: 87.5%;
	}
}	
</style>
